<template>
    <div id="SendpieceFrom">
        <el-card class="send" shadow="never">
            <el-tag size="medium" :type="this.type.get(this.routrname)[0]">{{
            this.type.get(this.routrname)[1]
            }}</el-tag>
            <el-form ref="send-form" :rules="rules" :model="send" label-width="100px">
                <el-form-item prop="name" label="姓名：">
                    <el-col :span="7">
                        <el-input v-model="send.send_name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item prop="destination" label="电话：">
                    <el-col :span="7">
                        <el-input v-model="send.send_phone"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item prop="destination" label="所属区域：">
                    <el-col :span="7">
                        <el-input v-model="send.send_region"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item prop="destination" label="详细地址：">
                    <el-col :span="7">
                        <el-input v-model="send.send_address"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <switch-vip />
        </el-card>
        <el-card shadow="never">
            <el-form ref="hav-form" :rules="rules" :model="hav" label-width="100px">
                <el-form-item prop="origin" label="姓名：">
                    <el-col :span="7">
                        <el-input v-model="hav.hav_name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item prop="destination" label="电话：">
                    <el-col :span="7">
                        <el-input v-model="hav.hav_phone"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item prop="destination" label="所属区域：">
                    <el-col :span="7">
                        <el-input v-model="hav.hav_region"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item prop="destination" label="详细地址：">
                    <el-col :span="7">
                        <el-input v-model="hav.hav_address"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item prop="destination" label="物品类型">
                    <el-col :span="7">
                        <el-select v-model="hav.selectval" placeholder="请选择">
                            <el-option v-for="item in options" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item prop="destination" label="预约重量">
                    <el-col>
                        <el-radio-group v-model="hav.weight">
                            <el-radio :label="1">1kg</el-radio>
                            <el-radio :label="2">2kg</el-radio>
                            <el-radio :label="3">3kg</el-radio>
                            <el-radio :label="4">其他</el-radio>
                        </el-radio-group>
                        <el-input-number :disabled="hav.weight < 4" v-model="orther" size="small"
                            controls-position="right" @change="handleChange" :min="1">
                        </el-input-number>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')" :disabled="!getName">立即创建</el-button>
                    <el-button @click="resetForm('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import SwitchVip from "./SwitchVip.vue";
import { mapGetters } from "vuex";
export default {
    components: { SwitchVip },
    name: "SendpieceFrom",
    data() {
        return {
            orther: "",
            type: new Map([
                ["commo", ["success", "普通寄件"]],
                ["quick", ["warning", "特快寄件"]],
                ["Valuable", ["danger", "贵品寄件"]],
            ]),
            routrname: this.$route.params.name,
            send: {
                send_name: "",
                send_phone: "",
                send_region: "",
                send_address: "",
            },
            hav: {
                hav_name: "",
                hav_phone: "",
                hav_region: "",
                hav_address: "",
                selectval: "",
                weight: "",
            },
            options: ["文件", "数码产品", "生活用品", "服饰", "食品", "其他"],
            rules: {
                name: [{ min: 3, message: "长度在 3 到 5 个字符", trigger: "blur" }],
                destination: [
                    { min: 3, message: "长度在 3 到 5 个字符", trigger: "blur" },
                ],
                ShippingTime: [
                    {
                        required: true,
                        message: "请选择日期",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    watch: {
        $route(val) {
            this.routrname = val.params.name
        }
    },
    mounted() {
        console.log(this.$route);
        console.log(this.type.get(this.routrname));
    },
    computed: {
        ...mapGetters(["getName"]),
    },
    methods: {
        async submitForm(formName) {
            try {
                let body = Object.assign(this.send, this.hav);
                let params = {
                    Origin: this.send.send_region,
                    Destination: this.hav.hav_region,
                    ShippingTime: "2",
                    weight: this.hav.weight === 4 ? this.orther : this.hav.weights,
                    routrname: this.routrname,
                };
                console.log(params);
                let res = await this.$API.reqSendpiece(body);
                let {
                    res: { Price },
                } = await this.$API.reqFreight(params);
                if (res.code === 200) {
                    this.$alert(
                        `<strong>支付费用${Price}</strong>
                    <div>订单编号${res.id}</div>`,
                        "下单成功",
                        {
                            dangerouslyUseHTMLString: true,
                            confirmButtonText: "确定",
                        }
                    );
                }
            } catch (error) {
                alert("下单失败");
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.send {
    position: relative;
}
</style>
